<template>
  <div class="leader-group">
    <tx-list-query
      @query="$handleQuery()"
      cleanText="清除查询条件"
      :table="table"
    >
      <tx-field-input
        :entity="table.query"
        name="name"
        label="成员单位名称"
        placeholder="请输入成员单位名称"
        @done="$handleInputQuery()"
        class="input-table-edit"
      />
      <tx-field-input
        :entity="table.query"
        name="adminName"
        label="管理员姓名"
        placeholder="请输入管理员姓名"
        @done="$handleInputQuery()"
        class="input-table-edit"
      />
    </tx-list-query>

    <tx-block>
      <div>
        <tx-button-add
          name="添加单位领导成员"
              @click="link('basic-maintain-item-create')"
            />
            <tx-button-add
              icon="el-icon-tickets"
              name="修改排序"
          @click="link('basic-maintain-item-create')"
          style="float: right;"
        />
      </div>

      <tx-list-table :table="table" ref="listTable" row-key="name">
        <tx-table-column-text prop="sort" label="排序" width="60" />
        <tx-table-column-text label="姓名" width="120">
          <template slot-scope="scope">
            <div v-if="!scope.row.editing">
              <span>{{ scope.row.name }}</span>
            </div>
            <div v-if="scope.row.editing">
              <el-input
                v-model="scope.row.name"
                class="input-table-edit"
                placeholder="请输入姓名"
              ></el-input>
            </div>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="单位">
          <template slot-scope="scope">
            <div v-if="!scope.row.editing">
              <span>{{ scope.row.adminName }}</span>
            </div>
            <div v-if="scope.row.editing">
              <el-input
                v-model="scope.row.adminName"
                class="input-table-edit"
                placeholder="请输入单位"
              ></el-input>
            </div>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="职务" width="200">
          <template slot-scope="scope">
            <div v-if="!scope.row.editing">
              <span>{{ scope.row.adminName }}</span>
            </div>
            <div v-if="scope.row.editing">
              <el-input
                v-model="scope.row.adminName"
                class="input-table-edit"
                placeholder="请输入职务"
              ></el-input>
            </div>
          </template>
        </tx-table-column-text>
        <tx-table-column-text label="手机号" width="180">
          <template slot-scope="scope">
            <div v-if="!scope.row.editing">
              <span>{{ scope.row.mobile }}</span>
            </div>
            <div v-if="scope.row.editing">
              <el-input
                v-model="scope.row.mobile"
                class="input-table-edit"
                placeholder="请输入手机号"
              ></el-input>
            </div>
          </template>
        </tx-table-column-text>
        <tx-table-column-action width="230">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              v-if="!scope.row.editing"
              class="table-edit-btn"
              @click="handleEdit(scope)"
              >编辑
            </el-button>
            <el-button
              type="primary"
              size="mini"
              v-if="scope.row.editing"
              @click="handleSave(scope)"
              class="table-save-btn"
              >保存
            </el-button>
            <el-button
              size="mini"
              type="danger"
              v-if="!scope.row.editing"
              @click="handleDelete(scope)"
              class="table-del-btn"
              >删除
            </el-button>
            <el-button
              size="mini"
              type="warning"
              v-if="scope.row.editing"
              @click="handleCancel(scope)"
              class="table-cancel-btn"
              >取消
            </el-button>
          </template>
        </tx-table-column-action>
      </tx-list-table>
      {{
        $nextTick(() => {
          $initDragTable($refs["listTable"], table.page, "records");
        })
      }}
    </tx-block>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      currentTables: {}, //
      table: {
        loading: false,
        query: {},
        sort: {
          descs: ["updateTime"],
        },
        page: this.$yzvue.initPage(),
      },
    };
  },

  mounted() {
    this.loadTable();
    console.log("records", this.table.page);
  },
  created() {
    this.currentTables = JSON.parse(localStorage.getItem("tempList"));
  },
  methods: {
    handleQuery() {
      this.loadTable();
    },

    async loadTable() {
      let param = this.getQueryParam();
      console.log(param);
      this.table.loading = true;

      // const { data } = await getList({ ...param, });
      this.$api.DeptController.page(param, (res) => {
        console.log(res);
        this.$yzvue.assembleBody(this.table.page, res.body);
        this.table.loading = false;
        this.$nextTick(() => {
          this.$initDragTable(
            this.$refs["partsTable"],
            this.table.page,
            "records"
          );
        });
      });
    },

    getQueryParam() {
      let param = this.$yzvue.assemblePage(this.table);
      let query = this.table.query;
      this.$yzvue.appendFilter(param.body.filters, "name", "like", query.name);
      return param;
    },
    // 编辑
    handleEdit($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.$set(this.table.page.records[scope.$index], "editing", true);
      this.currentTables = JSON.parse(
        JSON.stringify(this.table.page.records[scope.$index])
      ); // 保存当前历史编辑行
      console.log("records---", this.table.page.records);
    },
    // 保存
    handleSave($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.$set(this.table.page.records[scope.$index], "editing", false);
      // 请求后台接口更新数据库
    },
    // 取消
    handleCancel($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.$set(this.table.page.records, scope.$index, {
        ...this.currentTables,
        editing: false,
      });
    },
    //删除
    handleDelete($scope) {
      let {
        scope: { scope },
      } = $scope;
      this.table.page.records.splice(scope.$index, 1);
      // 请求后台接口删除数据库数据
    },
  },
};
</script>

<style lang="scss">
.main-container .leader-group {
  .tx-list-query {
    margin: 0px 15px 15px 15px;
  }
  .tx-block {
    width: auto;
    margin: 0px 15px;
    // background: $c-bg-query;
  }
}
</style>
